<template>
  <div class="songlist">
    <!-- 热门推荐 -->
    <div class="handlesongs">
      <div class="handlesleft">
        <div class="vector">
          <svg
            t="1635854120924"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="2069"
            width="200"
            height="200"
          >
            <path
              d="M512 768a256 256 0 1 0 0-512 256 256 0 0 0 0 512z m0 170.667a426.667 426.667 0 1 1 0-853.334 426.667 426.667 0 0 1 0 853.334z"
              fill="#E6211B"
              p-id="2070"
            ></path>
          </svg>
        </div>
        <div class="handlereferrals">热门推荐</div>
        <div class="Chinese">
          <router-link class="fashion" to="/discover/playlist?cat=华语"
            >华语</router-link
          ><span>|</span>
          <router-link class="fashion" to="/discover/playlist?cat=流行"
            >流行</router-link
          ><span>|</span>
          <router-link class="fashion" to="/discover/playlist?cat=摇滚"
            >摇滚</router-link
          ><span>|</span>
          <router-link class="fashion" to="/discover/playlist?cat=民谣"
            >民谣</router-link
          ><span>|</span>
          <router-link class="fashion" to="/discover/playlist?cat=电子"
            >电子</router-link
          >
        </div>
      </div>
      <div class="rightmore">
        <router-link to="/discover/playlist">更多</router-link>
        <span
          ><svg
            t="1635855658846"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="4519"
            width="200"
            height="200"
          >
            <path
              d="M560 512.414C560 453.643 512.357 406 453.586 406H204.414C145.643 406 98 453.643 98 512.414v0.172C98 571.357 145.643 619 204.414 619h249.172C512.357 619 560 571.357 560 512.586v-0.172z"
              fill="#d81e06"
              p-id="4520"
            ></path>
            <path
              d="M630.024 211.105l20.067 16.805 124.46 103.419L818 366.98v0.146l39.008 33.527 24.734 21.15c22.165 18.618 35.789 41.557 41.386 65.588 5.395 23.169 2.94 47.343-7.045 69.656-7.398 16.532-19.033 32.047-34.867 45.347l-21.025 17.62a128.674 128.674 0 0 1-3.92 3.425l-40.2 33.659-42.484 35.575-118.372 99.341a133.759 133.759 0 0 1-5.123 4.078l-20.068 16.805c-36.162 30.236-79.744 36.785-117.069 22.211-24.069-9.397-45.542-27.555-60.722-53.889l-2.171-3.77c-5.856-13.007-9.497-27.58-10.563-43.322l-0.455 0.443s41.854-154.592 41.854-222.471-41.758-212.887-41.758-212.887c0.035-19.354 3.923-37.113 10.923-52.66l2.171-3.77c14.42-25.015 34.524-42.636 57.131-52.395a112.775 112.775 0 0 1 3.59-1.494c37.325-14.574 80.907-8.024 117.069 22.212z"
              fill="#d81e06"
              p-id="4521"
            ></path></svg
        ></span>
      </div>
    </div>
    <!-- 八张图片 -->
    <ul class="songlistul">
      <li
        class="songlistli"
        @click="gotoDetailSong(hotlist.id)"
        v-for="hotlist in HotRecommendation"
        :key="hotlist.id"
      >
        <div class="songItem-img">
          <img :src="hotlist.picUrl" />
          <div class="songItem-cover">
            <div>
              <i class="sprite_icon reji"></i>
              <i>{{ Math.floor(hotlist.playCount / 10000) }}万</i>
            </div>
            <a class="sprite_icon play" href="##"></a>
          </div>
        </div>
        <p class="cover-title">{{ hotlist.name }}</p>
        <!-- <p class="cover-source">萝卜</p> -->
      </li>
    </ul>
    <!-- 个性化推荐 -->

    <!-- 空气墙 -->
    <div class="j-music-ad"></div>
    <!-- 新碟上架 -->
    <div class="handlesongs">
      <!-- 新碟上架 -->
      <div class="handlesleft">
        <div class="vector">
          <svg
            t="1635854120924"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="2069"
            width="200"
            height="200"
          >
            <path
              d="M512 768a256 256 0 1 0 0-512 256 256 0 0 0 0 512z m0 170.667a426.667 426.667 0 1 1 0-853.334 426.667 426.667 0 0 1 0 853.334z"
              fill="#E6211B"
              p-id="2070"
            ></path>
          </svg>
        </div>
        <div class="handlereferrals">新碟上架</div>
      </div>
      <div class="rightmore">
        <router-link to="">更多</router-link>
        <span
          ><svg
            t="1635855658846"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="4519"
            width="200"
            height="200"
          >
            <path
              d="M560 512.414C560 453.643 512.357 406 453.586 406H204.414C145.643 406 98 453.643 98 512.414v0.172C98 571.357 145.643 619 204.414 619h249.172C512.357 619 560 571.357 560 512.586v-0.172z"
              fill="#d81e06"
              p-id="4520"
            ></path>
            <path
              d="M630.024 211.105l20.067 16.805 124.46 103.419L818 366.98v0.146l39.008 33.527 24.734 21.15c22.165 18.618 35.789 41.557 41.386 65.588 5.395 23.169 2.94 47.343-7.045 69.656-7.398 16.532-19.033 32.047-34.867 45.347l-21.025 17.62a128.674 128.674 0 0 1-3.92 3.425l-40.2 33.659-42.484 35.575-118.372 99.341a133.759 133.759 0 0 1-5.123 4.078l-20.068 16.805c-36.162 30.236-79.744 36.785-117.069 22.211-24.069-9.397-45.542-27.555-60.722-53.889l-2.171-3.77c-5.856-13.007-9.497-27.58-10.563-43.322l-0.455 0.443s41.854-154.592 41.854-222.471-41.758-212.887-41.758-212.887c0.035-19.354 3.923-37.113 10.923-52.66l2.171-3.77c14.42-25.015 34.524-42.636 57.131-52.395a112.775 112.775 0 0 1 3.59-1.494c37.325-14.574 80.907-8.024 117.069 22.212z"
              fill="#d81e06"
              p-id="4521"
            ></path></svg
        ></span>
      </div>
    </div>
    <!-- 轮播图 -->
    <div>
      <template>
        <el-carousel
          :interval="5000"
          arrow="always"
          :autoplay="false"
          indicator-position="none"
          height="300px"
        >
          <el-carousel-item
            v-for="albums in newAlbums"
            :key="albums.id"
            autoplay="false"
          >
            <ul class="songlistulbox">
              <li
                class="songlistlili"
                v-for="albums in newAlbums"
                :key="albums.id"
              >
                <div class="songItem-imagr">
                  <img :src="albums.picUrl" />
                  <div class="songItem-covername">
                    <a class="sprite_icon play" href="##"></a>
                  </div>
                </div>
                <router-link to="" class="cover-titlename"
                  >{{ albums.name }}
                </router-link>
                <p class="cover-sourcelist">
                  <router-link to="">{{ albums.artist.name }}</router-link>
                </p>
              </li>
            </ul>
          </el-carousel-item>
        </el-carousel>
      </template>
    </div>
    <!-- 榜单 -->
    <div class="handlesongs">
      <div class="handlesleft">
        <div class="vector">
          <svg
            t="1635854120924"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="2069"
            width="200"
            height="200"
          >
            <path
              d="M512 768a256 256 0 1 0 0-512 256 256 0 0 0 0 512z m0 170.667a426.667 426.667 0 1 1 0-853.334 426.667 426.667 0 0 1 0 853.334z"
              fill="#E6211B"
              p-id="2070"
            ></path>
          </svg>
        </div>
        <div class="handlereferrals">榜单</div>
      </div>
      <div class="rightmore">
        <router-link to="">更多</router-link>
        <span
          ><svg
            t="1635855658846"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="4519"
            width="200"
            height="200"
          >
            <path
              d="M560 512.414C560 453.643 512.357 406 453.586 406H204.414C145.643 406 98 453.643 98 512.414v0.172C98 571.357 145.643 619 204.414 619h249.172C512.357 619 560 571.357 560 512.586v-0.172z"
              fill="#d81e06"
              p-id="4520"
            ></path>
            <path
              d="M630.024 211.105l20.067 16.805 124.46 103.419L818 366.98v0.146l39.008 33.527 24.734 21.15c22.165 18.618 35.789 41.557 41.386 65.588 5.395 23.169 2.94 47.343-7.045 69.656-7.398 16.532-19.033 32.047-34.867 45.347l-21.025 17.62a128.674 128.674 0 0 1-3.92 3.425l-40.2 33.659-42.484 35.575-118.372 99.341a133.759 133.759 0 0 1-5.123 4.078l-20.068 16.805c-36.162 30.236-79.744 36.785-117.069 22.211-24.069-9.397-45.542-27.555-60.722-53.889l-2.171-3.77c-5.856-13.007-9.497-27.58-10.563-43.322l-0.455 0.443s41.854-154.592 41.854-222.471-41.758-212.887-41.758-212.887c0.035-19.354 3.923-37.113 10.923-52.66l2.171-3.77c14.42-25.015 34.524-42.636 57.131-52.395a112.775 112.775 0 0 1 3.59-1.494c37.325-14.574 80.907-8.024 117.069 22.212z"
              fill="#d81e06"
              p-id="4521"
            ></path></svg
        ></span>
      </div>
    </div>
    <!-- 榜单下面的三列排行榜 -->
    <div class="examplelist">
      <!-- 飙升榜 -->
      <ul class="exampleullist">
        <li class="examplelilist">
          <div class="exampleimg">
            <img src="../image.jpg" alt="" />
          </div>
          <div class="examplestname">
            <h3>飙升榜</h3>
            <div class="breath"></div>
            <!-- 播放按钮 -->
            <svg
              t="1635905117026"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="3192"
              width="200"
              height="200"
            >
              <path
                d="M512 0C230.4 0 0 230.4 0 512s230.4 512 512 512 512-230.4 512-512S793.6 0 512 0z m0 981.333333C253.866667 981.333333 42.666667 770.133333 42.666667 512S253.866667 42.666667 512 42.666667s469.333333 211.2 469.333333 469.333333-211.2 469.333333-469.333333 469.333333z"
                p-id="3193"
                fill="#bfbfbf"
              ></path>
              <path
                d="M672 441.6l-170.666667-113.066667c-57.6-38.4-106.666667-12.8-106.666666 57.6v256c0 70.4 46.933333 96 106.666666 57.6l170.666667-113.066666c57.6-42.666667 57.6-106.666667 0-145.066667z"
                p-id="3194"
                fill="#bfbfbf"
              ></path>
            </svg>
            <svg
              t="1635903964275"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="11030"
              width="200"
              height="200"
            >
              <path
                d="M847.36 322.56H829.44v-46.08c0-50.816-39.34208-92.16-90.15296-92.16h-260.6592l-3.13856-10.24h-0.38912c-13.10208-40.96-50.26304-66.56-92.47744-66.56H176.64C122.99776 107.52 76.8 148.59776 76.8 202.24v619.52c0 53.64224 46.19776 99.84 99.84 99.84h552.96c118.57408 0 212.48-99.02592 212.48-217.6V419.84c0-53.64224-41.07776-97.28-94.72-97.28z m-108.07296-76.8C756.224 245.76 768 259.53792 768 276.48v46.08h-249.87648L496.1792 245.76h243.10784zM870.4 704c0 79.04768-61.75232 145.92-140.8 145.92h-552.96c-14.11584 0-28.16-14.04416-28.16-28.16v-619.52c0-14.11584 14.04416-23.04 28.16-23.04h205.9776c10.93632 0 20.58752 5.59616 24.17152 15.88224l46.81728 163.20512 0.384 0.94208C460.8768 380.3648 480.44032 394.24 502.66624 394.24H847.36c14.11584 0 23.04 11.48416 23.04 25.6v284.16z"
                fill="#9F9F9F"
                p-id="11031"
              ></path>
              <path
                d="M435.2 476.16H363.52v107.52H256v71.68h107.52v107.52h71.68v-107.52h107.52v-71.68H435.2z"
                fill="#9F9F9F"
                p-id="11032"
              ></path>
            </svg>
          </div>
        </li>
        <li class="examplelilistname" v-for="n in 10" :key="n">
          <span class="examplelilistspan" :class="n > 3 ? 'active' : ''">{{
            n
          }}</span>
          <router-link to="" class="examplename"
            >萝卜写不来了啊啊啊啊</router-link
          >
          <!-- 三个hover的现实隐藏的图标 -->
          <div class="svgname">
            <svg
              t="1635910244044"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="3722"
              width="200"
              height="200"
            >
              <path
                d="M512.449956 124.087882c52.394883 0 103.189923 10.298994 150.985255 30.497022 46.195489 19.498096 87.691436 47.495362 123.287961 83.191876 35.696514 35.696514 63.59379 77.192462 83.191875 123.28796 20.198028 47.795332 30.497022 98.590372 30.497022 150.985255s-10.298994 103.189923-30.497022 150.985255c-19.498096 46.195489-47.495362 87.691436-83.191875 123.287961-35.696514 35.696514-77.192462 63.59379-123.287961 83.191875-47.795332 20.198028-98.590372 30.497022-150.985255 30.497022s-103.189923-10.298994-150.985255-30.497022c-46.195489-19.498096-87.691436-47.495362-123.28796-83.191875-35.696514-35.696514-63.59379-77.192462-83.191876-123.287961-20.198028-47.795332-30.497022-98.590372-30.497022-150.985255s10.298994-103.189923 30.497022-150.985255c19.498096-46.195489 47.495362-87.691436 83.191876-123.28796 35.696514-35.696514 77.192462-63.59379 123.28796-83.191876 47.795332-20.198028 98.590372-30.497022 150.985255-30.497022m0-59.994141c-247.375842 0-447.956254 200.580412-447.956254 447.956254s200.580412 447.956254 447.956254 447.956254 447.956254-200.580412 447.956254-447.956254-200.580412-447.956254-447.956254-447.956254z"
                p-id="3723"
                fill="#707070"
              ></path>
              <path
                d="M569.54438 369.6639c-151.085246-94.990724-226.677863-47.495362-226.677863 142.486085s75.592618 237.476809 226.677863 142.486086 151.085246-189.981447 0-284.972171z"
                p-id="3724"
                fill="#707070"
              ></path>
            </svg>
            <svg
              t="1635910281248"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="4617"
              width="200"
              height="200"
            >
              <path
                d="M925.696 384q19.456 0 37.376 7.68t30.72 20.48 20.48 30.72 7.68 37.376q0 20.48-7.68 37.888t-20.48 30.208-30.72 20.48-37.376 7.68l-287.744 0 0 287.744q0 20.48-7.68 37.888t-20.48 30.208-30.72 20.48-37.376 7.68q-20.48 0-37.888-7.68t-30.208-20.48-20.48-30.208-7.68-37.888l0-287.744-287.744 0q-20.48 0-37.888-7.68t-30.208-20.48-20.48-30.208-7.68-37.888q0-19.456 7.68-37.376t20.48-30.72 30.208-20.48 37.888-7.68l287.744 0 0-287.744q0-19.456 7.68-37.376t20.48-30.72 30.208-20.48 37.888-7.68q39.936 0 68.096 28.16t28.16 68.096l0 287.744 287.744 0z"
                p-id="4618"
                fill="#8a8a8a"
              ></path>
            </svg>
            <svg
              t="1635910333120"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="7598"
              width="200"
              height="200"
            >
              <path
                d="M942.08 356.7616V286.72a102.4 102.4 0 0 0-102.4-102.4H522.4448l-32.1536-61.44H143.36a102.4 102.4 0 0 0-102.4 102.4v593.92a102.4 102.4 0 0 0 102.4 102.4h757.76a102.4 102.4 0 0 0 102.4-102.4V450.56a102.4 102.4 0 0 0-61.44-93.7984zM839.68 225.28a61.44 61.44 0 0 1 61.44 61.44v61.44H608.0512l-64.3072-122.88z m122.88 593.92a61.44 61.44 0 0 1-61.44 61.44H143.36a61.44 61.44 0 0 1-61.44-61.44V225.28a61.44 61.44 0 0 1 61.44-61.44h322.1504l117.76 225.28H901.12a61.44 61.44 0 0 1 61.44 61.44z"
                p-id="7599"
                fill="#8a8a8a"
              ></path>
            </svg>
          </div>
        </li>
        <li class="examplebase">
          <router-link to="" class="examplebaseaname">查看全部></router-link>
        </li>
      </ul>
      <!-- 新歌榜 -->
      <ul class="exampleullist">
        <li class="examplelilist">
          <div class="exampleimg">
            <img src="../image.jpg" alt="" />
          </div>
          <div class="examplestname">
            <h3>新歌榜</h3>
            <div class="breath"></div>
            <!-- 播放按钮 -->
            <svg
              t="1635905117026"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="3192"
              width="200"
              height="200"
            >
              <path
                d="M512 0C230.4 0 0 230.4 0 512s230.4 512 512 512 512-230.4 512-512S793.6 0 512 0z m0 981.333333C253.866667 981.333333 42.666667 770.133333 42.666667 512S253.866667 42.666667 512 42.666667s469.333333 211.2 469.333333 469.333333-211.2 469.333333-469.333333 469.333333z"
                p-id="3193"
                fill="#bfbfbf"
              ></path>
              <path
                d="M672 441.6l-170.666667-113.066667c-57.6-38.4-106.666667-12.8-106.666666 57.6v256c0 70.4 46.933333 96 106.666666 57.6l170.666667-113.066666c57.6-42.666667 57.6-106.666667 0-145.066667z"
                p-id="3194"
                fill="#bfbfbf"
              ></path>
            </svg>
            <svg
              t="1635903964275"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="11030"
              width="200"
              height="200"
            >
              <path
                d="M847.36 322.56H829.44v-46.08c0-50.816-39.34208-92.16-90.15296-92.16h-260.6592l-3.13856-10.24h-0.38912c-13.10208-40.96-50.26304-66.56-92.47744-66.56H176.64C122.99776 107.52 76.8 148.59776 76.8 202.24v619.52c0 53.64224 46.19776 99.84 99.84 99.84h552.96c118.57408 0 212.48-99.02592 212.48-217.6V419.84c0-53.64224-41.07776-97.28-94.72-97.28z m-108.07296-76.8C756.224 245.76 768 259.53792 768 276.48v46.08h-249.87648L496.1792 245.76h243.10784zM870.4 704c0 79.04768-61.75232 145.92-140.8 145.92h-552.96c-14.11584 0-28.16-14.04416-28.16-28.16v-619.52c0-14.11584 14.04416-23.04 28.16-23.04h205.9776c10.93632 0 20.58752 5.59616 24.17152 15.88224l46.81728 163.20512 0.384 0.94208C460.8768 380.3648 480.44032 394.24 502.66624 394.24H847.36c14.11584 0 23.04 11.48416 23.04 25.6v284.16z"
                fill="#9F9F9F"
                p-id="11031"
              ></path>
              <path
                d="M435.2 476.16H363.52v107.52H256v71.68h107.52v107.52h71.68v-107.52h107.52v-71.68H435.2z"
                fill="#9F9F9F"
                p-id="11032"
              ></path>
            </svg>
          </div>
        </li>
        <li class="examplelilistname" v-for="n in 10" :key="n">
          <span class="examplelilistspan" :class="n > 3 ? 'active' : ''">{{
            n
          }}</span>
          <router-link to="" class="examplename">萝卜</router-link>
          <!-- 三个hover的现实隐藏的图标 -->
          <div class="svgname">
            <svg
              t="1635910244044"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="3722"
              width="200"
              height="200"
            >
              <path
                d="M512.449956 124.087882c52.394883 0 103.189923 10.298994 150.985255 30.497022 46.195489 19.498096 87.691436 47.495362 123.287961 83.191876 35.696514 35.696514 63.59379 77.192462 83.191875 123.28796 20.198028 47.795332 30.497022 98.590372 30.497022 150.985255s-10.298994 103.189923-30.497022 150.985255c-19.498096 46.195489-47.495362 87.691436-83.191875 123.287961-35.696514 35.696514-77.192462 63.59379-123.287961 83.191875-47.795332 20.198028-98.590372 30.497022-150.985255 30.497022s-103.189923-10.298994-150.985255-30.497022c-46.195489-19.498096-87.691436-47.495362-123.28796-83.191875-35.696514-35.696514-63.59379-77.192462-83.191876-123.287961-20.198028-47.795332-30.497022-98.590372-30.497022-150.985255s10.298994-103.189923 30.497022-150.985255c19.498096-46.195489 47.495362-87.691436 83.191876-123.28796 35.696514-35.696514 77.192462-63.59379 123.28796-83.191876 47.795332-20.198028 98.590372-30.497022 150.985255-30.497022m0-59.994141c-247.375842 0-447.956254 200.580412-447.956254 447.956254s200.580412 447.956254 447.956254 447.956254 447.956254-200.580412 447.956254-447.956254-200.580412-447.956254-447.956254-447.956254z"
                p-id="3723"
                fill="#707070"
              ></path>
              <path
                d="M569.54438 369.6639c-151.085246-94.990724-226.677863-47.495362-226.677863 142.486085s75.592618 237.476809 226.677863 142.486086 151.085246-189.981447 0-284.972171z"
                p-id="3724"
                fill="#707070"
              ></path>
            </svg>
            <svg
              t="1635910281248"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="4617"
              width="200"
              height="200"
            >
              <path
                d="M925.696 384q19.456 0 37.376 7.68t30.72 20.48 20.48 30.72 7.68 37.376q0 20.48-7.68 37.888t-20.48 30.208-30.72 20.48-37.376 7.68l-287.744 0 0 287.744q0 20.48-7.68 37.888t-20.48 30.208-30.72 20.48-37.376 7.68q-20.48 0-37.888-7.68t-30.208-20.48-20.48-30.208-7.68-37.888l0-287.744-287.744 0q-20.48 0-37.888-7.68t-30.208-20.48-20.48-30.208-7.68-37.888q0-19.456 7.68-37.376t20.48-30.72 30.208-20.48 37.888-7.68l287.744 0 0-287.744q0-19.456 7.68-37.376t20.48-30.72 30.208-20.48 37.888-7.68q39.936 0 68.096 28.16t28.16 68.096l0 287.744 287.744 0z"
                p-id="4618"
                fill="#8a8a8a"
              ></path>
            </svg>
            <svg
              t="1635910333120"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="7598"
              width="200"
              height="200"
            >
              <path
                d="M942.08 356.7616V286.72a102.4 102.4 0 0 0-102.4-102.4H522.4448l-32.1536-61.44H143.36a102.4 102.4 0 0 0-102.4 102.4v593.92a102.4 102.4 0 0 0 102.4 102.4h757.76a102.4 102.4 0 0 0 102.4-102.4V450.56a102.4 102.4 0 0 0-61.44-93.7984zM839.68 225.28a61.44 61.44 0 0 1 61.44 61.44v61.44H608.0512l-64.3072-122.88z m122.88 593.92a61.44 61.44 0 0 1-61.44 61.44H143.36a61.44 61.44 0 0 1-61.44-61.44V225.28a61.44 61.44 0 0 1 61.44-61.44h322.1504l117.76 225.28H901.12a61.44 61.44 0 0 1 61.44 61.44z"
                p-id="7599"
                fill="#8a8a8a"
              ></path>
            </svg>
          </div>
        </li>
        <li class="examplebase">
          <router-link to="" class="examplebaseaname">查看全部></router-link>
        </li>
      </ul>
      <!-- 原创榜 -->
      <ul class="examplerightlist">
        <li class="examplelilist">
          <div class="exampleimg">
            <img src="../image.jpg" alt="" />
          </div>
          <div class="examplestname">
            <h3>原创榜</h3>
            <div class="breath"></div>
            <!-- 播放按钮 -->
            <svg
              t="1635905117026"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="3192"
              width="200"
              height="200"
            >
              <path
                d="M512 0C230.4 0 0 230.4 0 512s230.4 512 512 512 512-230.4 512-512S793.6 0 512 0z m0 981.333333C253.866667 981.333333 42.666667 770.133333 42.666667 512S253.866667 42.666667 512 42.666667s469.333333 211.2 469.333333 469.333333-211.2 469.333333-469.333333 469.333333z"
                p-id="3193"
                fill="#bfbfbf"
              ></path>
              <path
                d="M672 441.6l-170.666667-113.066667c-57.6-38.4-106.666667-12.8-106.666666 57.6v256c0 70.4 46.933333 96 106.666666 57.6l170.666667-113.066666c57.6-42.666667 57.6-106.666667 0-145.066667z"
                p-id="3194"
                fill="#bfbfbf"
              ></path>
            </svg>
            <svg
              t="1635903964275"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="11030"
              width="200"
              height="200"
            >
              <path
                d="M847.36 322.56H829.44v-46.08c0-50.816-39.34208-92.16-90.15296-92.16h-260.6592l-3.13856-10.24h-0.38912c-13.10208-40.96-50.26304-66.56-92.47744-66.56H176.64C122.99776 107.52 76.8 148.59776 76.8 202.24v619.52c0 53.64224 46.19776 99.84 99.84 99.84h552.96c118.57408 0 212.48-99.02592 212.48-217.6V419.84c0-53.64224-41.07776-97.28-94.72-97.28z m-108.07296-76.8C756.224 245.76 768 259.53792 768 276.48v46.08h-249.87648L496.1792 245.76h243.10784zM870.4 704c0 79.04768-61.75232 145.92-140.8 145.92h-552.96c-14.11584 0-28.16-14.04416-28.16-28.16v-619.52c0-14.11584 14.04416-23.04 28.16-23.04h205.9776c10.93632 0 20.58752 5.59616 24.17152 15.88224l46.81728 163.20512 0.384 0.94208C460.8768 380.3648 480.44032 394.24 502.66624 394.24H847.36c14.11584 0 23.04 11.48416 23.04 25.6v284.16z"
                fill="#9F9F9F"
                p-id="11031"
              ></path>
              <path
                d="M435.2 476.16H363.52v107.52H256v71.68h107.52v107.52h71.68v-107.52h107.52v-71.68H435.2z"
                fill="#9F9F9F"
                p-id="11032"
              ></path>
            </svg>
          </div>
        </li>
        <li class="examplelilistname" v-for="n in 10" :key="n">
          <span class="examplelilistspan" :class="n > 3 ? 'active' : ''">{{
            n
          }}</span>
          <router-link to="" class="examplename">萝卜</router-link>
          <!-- 三个hover的现实隐藏的图标 -->
          <div class="svgname">
            <svg
              t="1635910244044"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="3722"
              width="200"
              height="200"
            >
              <path
                d="M512.449956 124.087882c52.394883 0 103.189923 10.298994 150.985255 30.497022 46.195489 19.498096 87.691436 47.495362 123.287961 83.191876 35.696514 35.696514 63.59379 77.192462 83.191875 123.28796 20.198028 47.795332 30.497022 98.590372 30.497022 150.985255s-10.298994 103.189923-30.497022 150.985255c-19.498096 46.195489-47.495362 87.691436-83.191875 123.287961-35.696514 35.696514-77.192462 63.59379-123.287961 83.191875-47.795332 20.198028-98.590372 30.497022-150.985255 30.497022s-103.189923-10.298994-150.985255-30.497022c-46.195489-19.498096-87.691436-47.495362-123.28796-83.191875-35.696514-35.696514-63.59379-77.192462-83.191876-123.287961-20.198028-47.795332-30.497022-98.590372-30.497022-150.985255s10.298994-103.189923 30.497022-150.985255c19.498096-46.195489 47.495362-87.691436 83.191876-123.28796 35.696514-35.696514 77.192462-63.59379 123.28796-83.191876 47.795332-20.198028 98.590372-30.497022 150.985255-30.497022m0-59.994141c-247.375842 0-447.956254 200.580412-447.956254 447.956254s200.580412 447.956254 447.956254 447.956254 447.956254-200.580412 447.956254-447.956254-200.580412-447.956254-447.956254-447.956254z"
                p-id="3723"
                fill="#707070"
              ></path>
              <path
                d="M569.54438 369.6639c-151.085246-94.990724-226.677863-47.495362-226.677863 142.486085s75.592618 237.476809 226.677863 142.486086 151.085246-189.981447 0-284.972171z"
                p-id="3724"
                fill="#707070"
              ></path>
            </svg>
            <svg
              t="1635910281248"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="4617"
              width="200"
              height="200"
            >
              <path
                d="M925.696 384q19.456 0 37.376 7.68t30.72 20.48 20.48 30.72 7.68 37.376q0 20.48-7.68 37.888t-20.48 30.208-30.72 20.48-37.376 7.68l-287.744 0 0 287.744q0 20.48-7.68 37.888t-20.48 30.208-30.72 20.48-37.376 7.68q-20.48 0-37.888-7.68t-30.208-20.48-20.48-30.208-7.68-37.888l0-287.744-287.744 0q-20.48 0-37.888-7.68t-30.208-20.48-20.48-30.208-7.68-37.888q0-19.456 7.68-37.376t20.48-30.72 30.208-20.48 37.888-7.68l287.744 0 0-287.744q0-19.456 7.68-37.376t20.48-30.72 30.208-20.48 37.888-7.68q39.936 0 68.096 28.16t28.16 68.096l0 287.744 287.744 0z"
                p-id="4618"
                fill="#8a8a8a"
              ></path>
            </svg>
            <svg
              t="1635910333120"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="7598"
              width="200"
              height="200"
            >
              <path
                d="M942.08 356.7616V286.72a102.4 102.4 0 0 0-102.4-102.4H522.4448l-32.1536-61.44H143.36a102.4 102.4 0 0 0-102.4 102.4v593.92a102.4 102.4 0 0 0 102.4 102.4h757.76a102.4 102.4 0 0 0 102.4-102.4V450.56a102.4 102.4 0 0 0-61.44-93.7984zM839.68 225.28a61.44 61.44 0 0 1 61.44 61.44v61.44H608.0512l-64.3072-122.88z m122.88 593.92a61.44 61.44 0 0 1-61.44 61.44H143.36a61.44 61.44 0 0 1-61.44-61.44V225.28a61.44 61.44 0 0 1 61.44-61.44h322.1504l117.76 225.28H901.12a61.44 61.44 0 0 1 61.44 61.44z"
                p-id="7599"
                fill="#8a8a8a"
              ></path>
            </svg>
          </div>
        </li>
        <li class="examplebase">
          <router-link to="" class="examplebaseaname">查看全部></router-link>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { reqGetPersonalized, getNewAlbums } from '@/api/RecommendList'
import { mapState, mapActions } from 'vuex'
export default {
  name: 'SongList',
  data() {
    return {
      // handlereferrals:['华语','流行','摇滚','民谣','电子']
      // 热门推荐
      HotRecommendation: {},
      //  新碟上架
      newAlbums: []
    }
  },
  methods: {
    ...mapActions('singerlist', ['getSingerList']),
    ...mapActions('simi', ['getArtistlist']),
    gotoDetailSong(id) {
      this.$router.push({
        name: 'SongDetail'
      })
      localStorage.setItem('id', id)
    }
  },
  async mounted() {
    this.getSingerList()
    // const data=
    this.getArtistlist()
    const [result, albums] = await Promise.all([
      reqGetPersonalized(),
      getNewAlbums()
    ])
    this.HotRecommendation = result.result
    this.newAlbums = albums.albums
    // console.log(playlists)
    // vux数据逻辑
  },

  computed: {
    ...mapState('singerlist', ['artistsList']),
    ...mapState('simi', ['simiList'])
  }
}
</script>

<style lang="less" scope>
.songlist {
  width: 689px;
  margin: 0 auto;
  margin-top: 30px;
  position: relative;
  .songlistul {
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    .songlistli {
      height: 182px !important;
      padding: 0px 30px 40px 0px;
    }
  }
  .songlist-item {
    width: 140px;
  }
}
.handlesongs {
  height: 35px;
}
.songItem-img {
  width: 140px;
  height: 140px;
  border: 1px solid #d9d9d9;
  position: relative;
  img {
    width: 100%;
  }
  .songItem-cover {
    bottom: 0;
    width: 99%;
    height: 27px;
    line-height: 27px;
    position: absolute;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #ccc;
    background-color: rgba(0, 0, 0, 0.3);
    border: 1px solid #484746;
    div {
      padding-left: 8px;
    }
    .reji {
      display: inline-block;
      padding-right: 5px;
      width: 14px;
      height: 11px;
      background-position: 0 -24px;
    }
    .play {
      padding-right: 10px;
      width: 16px;
      height: 17px;
      background-position: 0 0;
    }
  }
}
.cover-title {
  display: inline-block;
  width: 140px;
  height: 38px;
  font-size: 14px;
  margin: 8px 0px 3px;
}
.handlesleft {
  display: flex;
}
.handlesongs {
  display: flex;
  justify-content: space-between;
  line-height: 35px;
  border-bottom: 2px solid red;
  margin-bottom: 20px;
}
.vector {
  height: 35px;
  svg {
    width: 35px;
    padding-top: 10px;
  }
}
.handlereferrals {
  width: 80px;
  height: 28px;
  font-size: 20px;
}
.Chinese {
  margin: 7px 0px 0px 20px;
  display: flex;
  .fashion {
    display: block;
    margin-top: -5px;
  }
  span {
    display: block;
    margin: -5px 10px 0px 10px;
  }
}
.rightmore {
  svg.icon {
    width: 12px;
    height: 12px;
  }
}
.handlegexing {
  width: 100px;
  height: 28px;
  font-size: 20px;
}
.cover-source {
  color: #999999;
  font-size: 12px;
  margin-top: 3px;
}
.j-music-ad {
  margin: 0px 0px 35px;
}
.songlistlili {
  margin: 60px 10px;
  height: 200px !important;
  padding-bottom: 40px;
}
.songlistlili {
  padding: 0 0 0 10px;
}
.songItem-imagr {
  width: 100px;
  height: 100px;
  // border: 1px solid #d9d9d9;
  position: relative;
  line-height: 260px !important;

  img {
    width: 100%;
  }
  .songItem-covername {
    bottom: 0;
    width: 99%;
    height: 27px;
    // line-height: 50px !important;
    position: absolute;
    // left: 2000px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #ccc;
    // background-color: rgba(0, 0, 0, 0.3);
    // border: 1px solid #484746;
    div {
      padding-left: 8px;
    }
    // .reji {
    //   display: inline-block;
    //   padding-right: 5px;
    //   width: 14px;
    //   height: 11px;
    //   background-position: 0 -24px;
    // }
    .play:hover {
      padding-right: 10px;
      width: 16px;
      height: 17px;
      background-position: 0 0;
      color: red !important;
    }
  }
}
.cover-titlename {
  display: inline-block;
  padding-top: 40px;
  width: 100px;
  height: 38px;
  font-size: 12px;
  margin: 8px 0px 3px;
  overflow: hidden;
}
.songlistulbox {
  height: 200px;
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  border: 1px solid #ccc;
  margin-top: 20px;
  background-color: #f5f5f5;
}
.el-carousel__arrow--left {
  margin-top: -40px !important;
  color: black !important;
  font-size: 16px !important;
  font-weight: bold;
  margin-left: -30px;
  background-color: transparent;
}
.el-carousel__arrow--right {
  margin-top: -40px !important;
  color: black !important;
  font-size: 16px !important;
  font-weight: bold;
  background-color: transparent;
}
.el-carousel__arrow--left:hover {
  background-color: transparent;
}
.el-carousel__arrow--right:hover {
  background-color: transparent;
}
.examplelist {
  display: flex;
  border: 1px solid #ccc;
  background-color: #f5f5f5;
}
.exampleullist {
  display: block;
  width: 230px;
  padding: 20px 0px 0px 19px;
  height: 472px;
}
.examplerightlist {
  width: 228px;
  padding: 20px 0px 0px 19px;
}
.exampleimg {
  width: 80px;
  height: 80px;
  img {
    width: 100%;
    box-shadow: 0px 8px 5px -5px gray;
  }
}
.examplelilist {
  height: 90px;
  display: flex;
}
.examplestname {
  width: 116px;
  padding: 6px 0px 0px 10px;
  svg {
    width: 25px;
    height: 25px;
    margin-right: 10px;
  }
}
.breath {
  margin-top: 10px;
}
.examplelilistname {
  display: flex;
  border: 1px solid #ccc;
  position: relative;
  &:nth-child(odd) {
    background: #f7f7f7;
  }
  &:nth-child(even) {
    background: #fff;
  }
  .examplelilistspan {
    color: red;
    display: block;
    width: 35px;
    height: 32px;
    text-align: center;
    line-height: 32px;
    font-size: 16px;
  }
  .examplename {
    width: 100px;
    line-height: 32px;
    font-size: 12px;
    color: #000;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  svg {
    margin-right: 5px;
    display: none;
    // line-height:32px;
    margin-top: 9px;
    font-size: 16px;
  }
}
.sngname {
  display: flex;
  width: 300px !important;
  height: 30px;
  position: absolute;
  right: 100px;
}
.examplelilistname:hover {
  svg {
    // display: flex ;
    display: inline-block;
    margin-top: 9px;
    font-size: 16px;
  }
}
.examplebase {
  height: 32px;
  line-height: 32px;
  border: 1px solid #ccc;
  .examplebaseaname {
    padding-left: 120px;
  }
}
.examplelilistspan.active {
  color: #000;
}
.cover-sourcelist {
  margin-top: -15px;
}
</style>
